<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input Suggestion</title>
<style type="text/css">
<!--
body{margin:50px;font: 12px/1.6 arial;color: #666;}
h2{font: 1.4em verdana;color: #369;}
.select{background-color:highlight;color:#FFF}
.unselect{background-color:#FFF;color:#000}
label{padding:0 5px 0 0;}
-->
</style>
</head>
<body>
<form method="post" action="?">
	<h2>Input Suggestion</h2>
	<p>input a letter like 'a' or 'b'<br /><label for="test1">Name</label><input type="text" name="test1" id="test1" /><input type="submit" name="button" id="button" value="Submit" /></p>
</form>
<script type="text/javascript">
<!--
/* 
r = reset (恢复到开始状态)
sO = showOption (显示y列表)
fT = findText (把符合的放到y列表中)
cP = correctPosition (用来兼容IE和FF的位置)
mS = moveSelect (用来移动键盘选择)
kR = keyResponse (敲击键盘后产生的反应)
p = position (用来调整显示层的位置)
kD = keyDown (按住一个键的反应)
kU = keyUp (松开一个键的反应)
a = 输入框
b = 自动完成的显示层
sO 里的 v = value
sO 里的 c = 每个公司层
cP 里的 d = distance
全部的 e = event
kR 里的 k = key
f = 键盘选择的层
cP 里的 o = object
cP 里的 a = attribute
mS 里的 s = step
全部的 p, q, r = 暂时用来循环使用的
fT 里的 y = 根据输入在输入框里的返回出的公司列表
z = 公司列表
*/
var z = new Array('a8', 'adobe', 'bmw', 'canon', 'abattoir', 'abbess', 'abbey', 'b', 'baby', 'baby boom', 'baby carriage', 'babyish', 'baby-sit');
function r() {
	f = -1;
	b.style.visibility = 'hidden';
	a.blur();
	a.focus();
}
function sO(v) {
	var c = document.createElement('DIV');
	with(c.style) {
		padding = '1px 0 0 5px';
		cursor = 'default';
		textAlign = 'left';
		overflow = 'hidden';
	}
	c.className = 'unselect';
	c.onmousemove = function(){
		for(var p = 0; p < b.childNodes.length; p++) {
			b.childNodes[p].className = 'unselect';
			if(b.childNodes[p] == c) {
				c.className = 'select';
				f = p;
			}
		}
	};
	c.onmousedown = function(e) {
		a.value = c.innerHTML;
		r();
	};
	c.innerHTML = v;
	b.appendChild(c);
}
function fT() {
	var y = new Array;
	var q = 0;
	for(var p = 0; p < z.length; p++) {
		if(z[p].substring(0, a.value.length).toLowerCase() == a.value.toLowerCase() && z[p].length > a.value.length) {
			y[q] = z[p];
			q++;
		}
	}
	if(y.length > 0) {
		b.innerHTML = '';
		for(var r = 0; r < y.length; r++) {
			sO(y[r]);
		}
		b.style.visibility = 'visible';
	} else {
		b.style.visibility = 'hidden';
	}
}
function cP(o, a) {
	var d = 0;
	while(o) {
		d += o[a];
		o = o.offsetParent;
	}
	return d;
}
function mS(s) {
	f += s;
	if(f < 0) f = b.childNodes.length - 1;
	if(f > b.childNodes.length - 1) f = 0;
	for(var p = 0; p < b.childNodes.length; p++) b.childNodes[p].className = 'unselect';
	b.childNodes[f].className = 'select';
}
function kR(e) {
	var k = e.keyCode;
	switch(k) {
		case 13:
			if(f != -1) a.value = b.childNodes[f].innerHTML;
		case 27:
			r();
			break;
		case 37:
		case 39:
			break;
		case 38:
			mS(-1);
			break;
		case 40:
			mS(1);
			break;
		default:
			if(a.value != '') {
				f = -1;
				fT();
			} else b.style.visibility = 'hidden';
			return;
	}
	document.getElementsByTagName('form')[0].onsubmit = function() {
		if(b.style.visibility == 'visible') {
			a.focus();
			return false;
		}
	};
}
function p() {
	with(b.style) {
		left = cP(a, 'offsetLeft') + 'px';
		top = cP(a, 'offsetTop') + a.offsetHeight - 2 + 'px';
	}
}
function kD(e) {
	if(!(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 63232 || e.keyCode == 63233)) return true;
	kR(e);
	return false;
}
function kU(e) {
	if(!(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 63232 || e.keyCode == 63233)) kR(e);
	return false;
}
window.onload = function() {
	a = document.getElementById('test1');
	a.autocomplete = 'off';
	a.onblur = function() {b.style.visibility = 'hidden';};
	f = -1;
	if(a.createTextRange) {
		a.onkeydown = new Function('return kD(event);');
		a.onkeyup = new Function('return kU(event);');
	} else {
		a.onkeypress = kD;
		a.onkeyup = kU;
	}
	b = document.createElement('DIV');
	with(b.style) {
		padding = '0 0 14px';
		backgroundColor = '#FFF';
		border = '1px solid #000';
		font = '11px Tahoma';
		zIndex = '2';
		position = 'absolute';
		width = a.offsetWidth - 2 + 'px';
		visibility = 'hidden';
	}
	p();
	document.body.appendChild(b);
};
window.onresize = p;
-->
</script>
</body>
</html>